<template>
  <div class="box">
    <el-container>
      <el-header class="header">
        <img src="../assets/images/biaoti.png" alt="" />
      </el-header>
      <el-main class="main">
        <div class="main_center1">
          <img src="../assets/images/yemian.png" alt="" />
        </div>
        <div class="main_center2">
          <el-card class="box-card">
            <div class="main_center2_zi">账号登录</div>
            <div class="form">
              <!-- 表单 -->
              <el-form
                ref="loginForm"
                :rules="rules"
                :model="form"
                label-width="0px"
                class="loginForm"
              >
                <el-form-item lang="" prop="username">
                  <el-input
                    prefix-icon="el-icon-user-solid"
                    v-model="form.username"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item lang="" prop="pass">
                  <el-input
                    prefix-icon="el-icon-lock"
                    type="password"
                    v-model="form.pass"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" class="btns">
                  <el-button
                    type="success"
                    round
                    style="width: 170px"
                    @click="submitForm('loginForm')"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
              <!-- 表单结束 -->
            </div>
          </el-card>
        </div>
      </el-main>
      <el-footer class="bottom">
        <div class="bottom_zi">
          云教务系统@2021京ICP备17033472号-4
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        pass: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((res) => {
        if (res) {
         //   console.log(res);
          this.axios
            .post(
              "http://www.eshareedu.cn/edusystems/api/admin/checklogin",
              this.form
            )
            .then((response) => {
              if (response.data.errCode == "10000") {
                //把token存入sessionStorage
                console.log(response);
                window.sessionStorage.setItem("success_token", response.data.data.token);
                window.sessionStorage.setItem("name", this.form.username);
                this.$message.success("登录成功");  
                this.$router.push("/Home");
              } else {
                this.$message.error("登录失败");
              }
            });
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.box {
  width: 100%;
}

.box .header {
  height: 90px;
  margin-top: 50px;
  margin-bottom: 30px;
  //   background-color: blueviolet;
}

.box .main {
  height: 457px;
  background-color: rgb(247, 247, 247);
  display: flex;
}

.box .main .main_center1 {
  width: 690px;
  height: 415px;
  background-color: coral;
  margin-left: 100px;
}

.box .main .main_center1 img {
  width: 100%;
  height: 100%;
}

.box .main .main_center2 {
  width: 430px;
  height: 415px;
  background-color: rgb(255, 255, 255);
  margin-left: 100px;
}

.box .main .main_center2 .main_center2_zi {
  width: 100%;
  height: 96px;
  line-height: 96px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-right: 20px;
  // background-color: cyan;
}

.box .main .main_center2 .form {
  width: 340px;
  height: 320px;
  margin: auto;
  //   background-color: darkcyan;
}

.box .main .main_center2 .box-card {
  width: 100%;
  height: 100%;
}

.box .bottom {
  margin-top: 50px;
  height: 72px;
  // background-color: chartreuse;
}

.box .bottom .bottom_zi{
  text-align: center;
  line-height: 72px;
  font-weight: bold;
}

.btns {
  margin-top: 30px;
  margin-left: 80px;
}
</style>